import React, {useRef, useState, useEffect} from 'react'
import {Spin} from 'antd'
import {request} from 'umi'
import { ReactNode } from 'react-router/node_modules/@types/react'

interface ChartProps {
    noteCode: string,
    pullInterval?: number,
    children: ReactNode
}

const ChartContainer = (props:ChartProps) => {
  const {noteCode} = props
  console.log(props)
  const ref = useRef<any>(null)
  const [loading,setLoading] = useState(false)
  const [result,setResult] = useState([]) 

  useEffect(() => {
    if (props.pullInterval && props.pullInterval < 0) return
    if(props.pullInterval) {
        ref.current = window.setInterval(() => {
        handleReqUserList()
      },props.pullInterval)
    } else {
        handleReqUserList()
    }

    return () => {
       if (props.pullInterval) {
          clearInterval(ref.current) 
       } 
    }
  },[])

  
  const handleReqUserList = () => {
    request('/api/user/list', {
      params: {
        page: 1,
        pageSize: 10,
      },
    }).then((res) => {
      if (res.err_code === 0) {
          setLoading(false)
          setResult(res.data)
      }
    });
  };



  return (
      <div>11111 {noteCode} 
      {props.children}
      {React.Children.map(props.children, (child, i) => {
        return React.cloneElement(child, {"test": result})
})}
      </div>
  )
}

export default ChartContainer